/* ============================================================
   26-keyframes.css
   Thematisch aufgeteilt aus default.css + SiTTsBlazor.css
   ============================================================ */

/* ---- aus default.css ---- */

@-webkit-keyframes slideIn {
    from {
        bottom: -300px;
        opacity: 0
    }

    to {
        bottom: 0;
        opacity: 1
    }
}

@keyframes slideIn {
    from {
        bottom: -300px;
        opacity: 0
    }

    to {
        bottom: 0;
        opacity: 1
    }
}

@-webkit-keyframes slideRight {
    from {
        right: -300px;
        opacity: 0
    }

    to {
        right: 0;
        opacity: 1
    }
}

@keyframes slideRight {
    from {
        right: -300px;
        opacity: 0
    }

    to {
        right: 0;
        opacity: 1
    }
}


@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes system-auffallig-server {
    0%, 49% {
        background-color: rgba(0, 0, 255, 0);
    }

    50%, 100% {
        /*        background-color: rgba(0, 0, 255, 0.1);*/
        background-color: rgba(79,0,215,0.102);
    }
}

@keyframes system-auffallig-client {
    0%, 49% {
        background-color: rgba(255, 0, 0, 0);
    }

    50%, 100% {
        /*        background-color: rgba(255, 0, 0, 0.1);*/
        background-color: rgba(226,3,61,0.103);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}


@keyframes borderAnimation {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 400% 0%;
    }
}

@keyframes SpinMyHead {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
@keyframes AlarmGoesWild{
    0%{
        transform:scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes apolloFloat {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }

    100% {
        transform: translateY(0);
    }
}

/* ---- aus SiTTsBlazor.css ---- */

@keyframes timerbar {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}